<template>
  <div class="h-full w-full p-8 bg-yellow-50"
       @dragover.prevent="()=>{}"
       @drop.prevent="dragDrop">

    <div class="flex justify-center items-center rounded-md border-1 border-dashed border-gray-400 h-full text-gray-500 text-lg no-copy ">
      Drag files here
    </div>
  </div>
</template>

<script setup lang="ts">
import {useTaskStore} from "@/stores/task.ts";
import {getDirOrFileSize, hashCode} from "@/utils/my_function.js";
import {FileTask, TaskStatus} from "@/models/task.ts";
import 'element-plus/es/components/message/style/css';
import {ElMessage} from 'element-plus'
import {useChatStore} from "@/stores/chat.ts";

const chatStore = useChatStore();
const taskStore = useTaskStore();

const dragDrop = (event: DragEvent) => {
  event.preventDefault(); // 阻止默认行为

  if (!chatStore.remoteIp) {
    ElMessage.warning("未连接远端 ")
    return
  }

  for (let item of event.dataTransfer.items) {
    // 只要文件
    if (item.kind === 'file') {

      const entry = item.webkitGetAsEntry();
      if (!entry) continue;


      const metadataKey = `${entry.name}-${item.getAsFile()!.size}-${item.getAsFile()!.lastModified}`;

      let filePath = window.electron.getFilePath(item.getAsFile());


      getDirOrFileSize(entry).then( (size:number) =>{

        console.debug(`>>> path = ${filePath},fileName=${entry?.name}, size=${size}, ${entry.isDirectory?"【目录】":""}, metadataKey = ${metadataKey}`)

        const task = new FileTask(hashCode(metadataKey), entry?.name, size, entry.isDirectory);
        taskStore.addToTaskList(task)

        window.chat.tcpSend(task.id,filePath).then(()=>{
          console.log("前端已经提交传输任务了 : "+filePath)
          taskStore.getTaskById(task.id).status = TaskStatus.RUNNING
        })
      })

      ElMessage.success("已添加了文件 "+entry.name)
    }
  }

}


</script>

<style scoped>
/* 定义一个类，实现文本不可选中 */
.no-copy {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>